<template>
  <div>
<<<<<<< HEAD
    <transition name="fade">
      <div class="Major_name_lists" v-if="majortyle == 1">
        <div class="name_lists">
          <div class="name_lists_header">
            <div class="Choose_Major">
              <span>挑选专业</span>
              <div class="addMajor" @click="NoneMajorlist()">
                <i class="el-icon-close"></i>
              </div>
            </div>
          </div>
          <div class="name_lists_bottom">
            <div class="lists_bottom">
              <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

              <el-tree
                class="Major_centent_content"
                ref="tree"
                :data="majorbox"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
              ></el-tree>
            </div>
          </div>
        </div>
      </div>
    </transition>

=======
    <div class="Major_name_lists" v-if="majortyle == 1">
      <div class="name_lists">
        <div class="name_lists_header">
          <div class="Choose_Major" @click="MajorNone">
            <span>挑选专业</span>
            <i class="MajorNone">完成</i>
          </div>
        </div>
        <div class="name_lists_bottom">
          <div class="lists_botto">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

            <el-tree
              class="Major_centent_content"
              ref="tree"
              :data="majorbox"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
            ></el-tree>
          </div>
        </div>
      </div>
    </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
    <transition name="fade">
      <div class="search_major" v-if="tyle == 0">
        <div class="centre">
          <div class="header_search">
            <div class="search_header_left">
              <h3>我的高考成绩</h3>
              <div class="my_achievement">
<<<<<<< HEAD
                <span>
                  {{UserLsit.provinceName}}省/{{UserLsit.estimateScore +"分"}}/
                  {{UserLsit.gradeName}}
                </span>
=======
                <span>广东省/660/理科</span>
                <i class="el-icon-edit-outline"></i>
>>>>>>> 314b442cce11d658746227581b0160373004c345
              </div>
            </div>
            <div class="search_header_right">
              <h3>批次</h3>
              <el-dropdown split-button type="primary" @command="handleBatch">
<<<<<<< HEAD
                <span class="span">{{Gender.batchName }}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for=" (item , index) in suitableBatch"
                    :key="index"
                    :command="item"
                  >{{item.batchName}}</el-dropdown-item>
=======
                <span class="span">{{Batchs == U.id ? U.batchName : S.batchName }}</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="U.id">{{U.batchName}}</el-dropdown-item>
                  <el-dropdown-item :command="S.id">{{S.batchName}}</el-dropdown-item>
>>>>>>> 314b442cce11d658746227581b0160373004c345
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="search_list_name">
            <div class="list_name" v-for="(item ,index) in  MajorName" :key="index">
              <div class="addMajor" @click="add_major(index)"></div>
<<<<<<< HEAD
              <span>{{item.category == '' ? "添加专业" : item.category }}</span>
              <i v-if="item.category == ''" class="el-icon-circle-plus-outline"></i>
              <i v-else class="el-icon-remove-outline"></i>
              <div
                v-if="item.category != ''"
                class="cutMajor"
                @click="cutMajor(index , item.majorAllId)"
              ></div>
=======
              <span>{{item.category == '' ? "请选择专业" : item.category }}</span>
              <i v-if="item.category == ''" class="el-icon-circle-plus-outline"></i>
              <i v-else class="el-icon-remove-outline"></i>
              <div v-if="item.category != ''" class="cutMajor" @click="cutMajor(index)"></div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
            </div>
          </div>
          <div class="search_major_school">
            <el-button v-if="majorAllId.length > 0" type="primary" @click="addSchoolMajor">
              <i class="el-icon-search"></i>按专业查找学校
            </el-button>
            <el-button v-else type="primary" disabled>
              <i class="el-icon-search"></i>按专业查找学校
            </el-button>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="volunteer_bottom" v-if="tyle == 1">
        <h4>
          <i class="iconfont">&#xe733;</i> 选择学校
        </h4>
        <div class="volunteer_centent">
          <div class="punching">
            <div class="Tips" v-if="schoolNumber.punching == 0" v-on:click=" i = 3 ">
              <div class="tips_in" v-if="i == 3 ">
                <h5>没有适合的学校</h5>
              </div>
            </div>
            <router-link
              :to="{
                  name:'/ChooseSchool',
                  params:{
<<<<<<< HEAD
                    id : 0,
                    batch:this.Gender.id,
=======
                    id : 2,
                    batch:this.Batchs,
>>>>>>> 314b442cce11d658746227581b0160373004c345
                    type:this.arrMajorID
                  }
                }"
              tag="span"
            >
              <h3>冲</h3>
<<<<<<< HEAD
              <h4>可冲击的大学</h4>
=======
              <h4>可冲击录取大学</h4>
>>>>>>> 314b442cce11d658746227581b0160373004c345
              <p>大学录取可能性低</p>
              <span>
                {{schoolNumber.punching}}所
                <i class="iconfont">&#xe733;</i>
              </span>
            </router-link>
          </div>
          <div class="stable">
            <div class="Tips" v-if="schoolNumber.stable == 0" v-on:click=" i = 1 ">
              <div class="tips_in" v-if="i == 1 ">
                <h5>没有适合的学校</h5>
              </div>
            </div>
            <router-link
              :to="{
                  name:'/ChooseSchool',
                  params:{
                    id : 1,
<<<<<<< HEAD
                    batch:this.Gender.id,
=======
                    batch:this.Batchs,
>>>>>>> 314b442cce11d658746227581b0160373004c345
                    type:this.arrMajorID
                  }
                }"
              tag="span"
            >
              <h3>稳</h3>
              <h4>较稳妥的大学</h4>
              <p>大学录取的可能性较高</p>
              <span>
                {{schoolNumber.stable}}所
                <i class="iconfont">&#xe733;</i>
              </span>
            </router-link>
          </div>

          <div class="Protect">
            <div class="Tips" v-if="schoolNumber.protect == 0" v-on:click=" i = 2 ">
              <div class="tips_in" v-if="i == 2 ">
                <h5>没有适合的学校</h5>
              </div>
            </div>

            <router-link
              :to="{
                  name:'/ChooseSchool',
                  params:{
                    id : 2,
<<<<<<< HEAD
                    batch:this.Gender.id,
=======
                    batch:this.Batchs,
>>>>>>> 314b442cce11d658746227581b0160373004c345
                    type:this.arrMajorID
                  }
                }"
              tag="span"
            >
              <h3>保</h3>
              <h4>可保底的大学</h4>
              <p>大学录取的可能性非常高</p>
              <span>
                {{schoolNumber.protect}}所
                <i class="iconfont">&#xe733;</i>
              </span>
            </router-link>
          </div>
        </div>

        <div class="cutSchoolNumber" v-on:click="tyle = 0">
          <el-button type="primary">重新选择专业</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Major",
  data() {
    return {
      i: "",
<<<<<<< HEAD

=======
      U: "",
      S: "",
>>>>>>> 314b442cce11d658746227581b0160373004c345
      Undergraduate: "",
      Specialty: "",
      Batchs: "",
      BatchsType: "",
      tyle: 0,
      majortyle: "0",
      MajorName: [],
      majorListIndex: "",
      majorIdList: [],
      defaultProps: {
        children: "majorAllEntityList",
        label: "category"
      },
      filterText: "",
      majorAllId: [],
      schoolNumber: "",
<<<<<<< HEAD
      arrMajorID: [],
      UserLsit: "",
      Gender: "",
      suitableBatch: "",
      UMajorList: "",
      SMajorList: ""
=======
      arrMajorID: []
>>>>>>> 314b442cce11d658746227581b0160373004c345
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    open3(s) {
      this.$message.error(s);
    },
    filterNode(value, data) {
      if (!value) return true;
<<<<<<< HEAD

      return data.category.indexOf(value) !== -1;
    },
    //关闭专业树
    NoneMajorlist() {
      this.majortyle = "";
    },
    getUserLsit() {
      this.$ajax({
        method: "POST",
        url: "/api/query/userInfo",

        success: res => {
          if (res.data.code == 0) {
            this.UserLsit = res.data.data;
          }
        }
      });
    },
    //换批次
    handleBatch(ID) {
      this.Gender = ID;

      this.MajorName = [];
      this.MajorName = [];

      if (ID.batchType == 2) {
        this.majorbox = this.UMajorList;
      } else {
        this.majorbox = this.SMajorList;
      }
      this.getMajorNum();
=======
      console.log(value, data);
      return data.category.indexOf(value) !== -1;
    },

    handleBatch(ID) {
      if (ID == this.U.id) {
        this.Batchs = this.U.id;
        this.BatchsType = this.U.batchType;
        this.MajorName = [];
        for (let i = 0; i < this.Undergraduate.majorNumber; i++) {
          this.MajorName.push({ category: "" });
        }
      } else if (ID == this.S.id) {
        this.Batchs = this.S.id;
        this.BatchsType = this.S.batchType;
        this.MajorName = [];
        for (let i = 0; i < this.Specialty.majorNumber; i++) {
          this.MajorName.push({ category: "" });
        }
      }
>>>>>>> 314b442cce11d658746227581b0160373004c345
    },
    add_major(i) {
      this.majortyle = "1";
      this.majorListIndex = i;
    },
    MajorNone() {
      this.majortyle = "0";
    },
    // 获取专业树
    getMajorList() {
      this.$ajax({
        method: "GET",
<<<<<<< HEAD
        url: "/api/major/guess/catalogue/" + 1,

        success: res => {
          if (res.data.code == 0) {
            this.SMajorList = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
      this.$ajax({
        method: "GET",
        url: "/api/major/guess/catalogue/" + 2,

        success: res => {
          if (res.data.code == 0) {
            this.UMajorList = res.data.data;
=======
        url: "/api/major/guess/catalogue/" + this.BatchsType,

        success: res => {
          if (res.data.code == 0) {
>>>>>>> 314b442cce11d658746227581b0160373004c345
            this.majorbox = res.data.data;
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    },
<<<<<<< HEAD
    // 删除已选择的专业
    cutMajor(i, ID) {
      this.MajorName.splice(i, 1, { category: "" });
      var index = this.majorAllId.map(M => M.majorAllId).indexOf(ID);
      this.majorAllId.splice(index, 1);
    },
    //获取批次
=======
    cutMajor(i) {
      this.MajorName.splice(i, 1, { category: "" });
    },
>>>>>>> 314b442cce11d658746227581b0160373004c345
    getBatch() {
      this.$ajax({
        method: "POST",
        url: "/api/voluntary/targetBatch",

        success: res => {
          if (res.data.code == 0) {
<<<<<<< HEAD
            this.Gender = res.data.data.suitableBatch[0];

            this.suitableBatch = res.data.data.suitableBatch;

            var str = res.data.data.suitableBatch;
            var j = [];
            str.forEach(e => {
              j.push(e.id);
              return j;
            });

            var Undergraduate = j[0];
            var Specialty = j[1];
            localStorage.setItem("Undergraduate", Undergraduate);
            localStorage.setItem("Specialty", Specialty);
            this.getMajorNum();
=======
            var Batch = res.data.data.suitableBatch;
            var s = [];
            Batch.forEach(e => {
              s.push(e);
              return s;
            });
            this.U = s[0];
            this.S = s[1];
            this.Batchs = this.U.id;
            this.BatchsType = this.U.batchType;
            this.getMajorNum();

            this.getMajorList();
          } else {
            this.open3(res.data.msg);
>>>>>>> 314b442cce11d658746227581b0160373004c345
          }
        }
      });
    },
    getMajorNum() {
<<<<<<< HEAD
      for (let i = 0; i < 6; i++) {
        this.MajorName.push({ category: "" });
      }

      // this.$ajax({
      //   method: "GET",
      //   url: "/api/volunteerNum/schoolNum/" + this.Gender.id,

      //   success: res => {
      //     if (res.data.code == 0) {
      //       this.Specialty = res.data.data;
      //     }
      //   }
      // });
    },
    //添加专业
    handleNodeClick(d) {
      if (d.type > 2) {
        if (this.majorAllId.indexOf(d.majorAllId) == -1) {
          this.MajorName.splice(this.majorListIndex, 1, d);
          this.majorAllId.push(d.majorAllId);
          this.majortyle = "";
        } else {
          this.open3("此专业已现在 ，请选择其它专业");
        }
      }
    },
    // 获取
    addSchoolMajor() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      var vip = userInfo.userEntity.vip;
      if (vip > 1) {
        var arr = [];
        this.MajorName.map(s => {
          if (s.category != "") {
            arr.push(s.majorAllId);
          }
        });
        this.$ajax({
          method: "POST",
          url: "/api/voluntary/majorSchoolCount",
          data: {
            batch: this.Gender.id,
            majorAllIds: arr
          },
          success: res => {
            if (res.data.code == 0) {
              this.tyle = 1;
              this.schoolNumber = res.data.data;

              this.MajorName.map(t => {
                if (t.category != "") {
                  var arr = [];

                  arr.push(t.majorAllId);
                }
              });
              this.arrMajorID = arr.toString();
            }
          }
        });
      } else {
        this.$router.push({
          path: "/MyMember/Member/3"
        });
      }
=======
      this.$ajax({
        method: "GET",
        url: "/api/volunteerNum/schoolNum/" + this.U.id,

        success: res => {
          if (res.data.code == 0) {
            this.Undergraduate = res.data.data;

            for (let i = 0; i < this.Undergraduate.majorNumber; i++) {
              this.MajorName.push({ category: "" });
            }
          }
        }
      });
      this.$ajax({
        method: "GET",
        url: "/api/volunteerNum/schoolNum/" + this.S.id,

        success: res => {
          if (res.data.code == 0) {
            this.Specialty = res.data.data;
          }
        }
      });
    },
    handleNodeClick(d) {
      this.MajorName.splice(this.majorListIndex, 1, d);
      this.majorAllId.push(d.majorAllId);
    },
    addSchoolMajor() {
      var arr = [];
      this.MajorName.map(s => {
        if (s.category != "") {
          arr.push(s.majorAllId);
        }
      });
      this.$ajax({
        method: "POST",
        url: "/api/volunteer/major/universityTest",
        data: {
          batch: this.Batchs,
          majorAllIds: arr
        },
        success: res => {
          if (res.data.code == 0) {
            this.tyle = 1;
            this.schoolNumber = res.data.data;

            this.MajorName.map(t => {
              if (t.category != "") {
                var arr = [];

                arr.push(t.majorAllId);
              }
            });
            this.arrMajorID = arr;
          }
        }
      });
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
<<<<<<< HEAD
      this.getMajorList();
      this.getBatch();
      this.getUserLsit();
=======
      this.getBatch();
>>>>>>> 314b442cce11d658746227581b0160373004c345
    });
  }
};
</script>
<style lang="scss">
.Major_name_lists {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  background: rgba($color: #000000, $alpha: 0.4);
  z-index: 1100;
  .name_lists {
    width: 400px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    height: 550px;
    margin: 0 auto;
    margin-top: 30px;
    .name_lists_header {
<<<<<<< HEAD
      display: flex;

      padding-top: 34px;
      position: relative;
      .Choose_Major {
        padding: 0 18px;
        width: 100%;
=======
      padding-top: 34px;
      .Choose_Major {
        padding: 0 18px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
        border-bottom: 12px solid #f8f8f8;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 18px;
          padding: 12px 0;
        }
        i {
          font-size: 18px;
          color: #4387f6;
          padding: 12px 12px;
          cursor: pointer;
        }
      }
<<<<<<< HEAD
      .addMajor {
        position: absolute;
        right: 16px;
        top: 8px;
        padding: 20px;
        color: #2e86ff;
        cursor: pointer;
        font-size: 28px;
        i {
          font-size: 28px;
          color: #4387f6;
          padding: 12px 12px;
          cursor: pointer;
        }
      }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    }
    .name_lists_bottom {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding-right: 50px;

<<<<<<< HEAD
      .lists_bottom {
        padding-bottom: 200px;
        width: 316px;
        padding-left: 30px;
        .el-input {
          margin: 20px 10px 10px 70px;
          width: 192px;
=======
      .lists_botto {
        padding-bottom: 200px;
        width: 200px;
        padding-left: 30px;
        .el-input {
          margin: 20px 10px 10px 70px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
        }
      }
    }
  }
}

.volunteer_bottom {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  width: 1000px;
  height: 682px;
  padding: 100px;
  background: #fff;
  border-radius: 3px;

  > h4 {
    font-size: 14px;
    color: #414141;
    .iconfont {
      display: inline-block;
      font-size: 13px;
      transform: rotate(90deg);
      position: relative;
      top: 1px;
    }
  }

  .volunteer_centent {
    display: flex;
    > div {
      margin-right: 64px;
      cursor: pointer;
    }
    .punching {
      position: relative;
      height: 240px;
      width: 240px;
      margin-top: 34px;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      h3 {
        font-size: 24px;
        color: #fff;
        background: #4387f6;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        margin: 0 auto;
        margin-top: 38px;
        border-radius: 50%;
        margin-bottom: 24px;
      }
      h4 {
        text-align: center;
        font-size: 16px;
        color: #414141;
      }
      p {
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 48px;
      }
      span {
        font-size: 14px;
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 42px;

        .iconfont {
          display: inline-block;
          font-size: 13px;
          transform: rotate(270deg);
          position: relative;
          top: -2px;

          color: #2e86ff;
        }
      }
    }
    .stable {
      position: relative;
      height: 240px;
      width: 240px;
      margin-top: 34px;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      h3 {
        font-size: 24px;
        color: #fff;
        background: #f19147;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        margin: 0 auto;
        margin-top: 38px;
        border-radius: 50%;
        margin-bottom: 24px;
      }
      h4 {
        text-align: center;
        font-size: 16px;
        color: #414141;
      }
      p {
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 48px;
      }
      span {
        font-size: 14px;
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 42px;
        .iconfont {
          display: inline-block;
          font-size: 13px;
          transform: rotate(270deg);
          position: relative;
          top: -2px;

          color: #2e86ff;
        }
      }
    }
    .Protect {
      position: relative;
      height: 240px;
      width: 240px;
      margin-top: 34px;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      h3 {
        font-size: 24px;
        color: #fff;
        background: #f7ce38;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        margin: 0 auto;
        margin-top: 38px;
        border-radius: 50%;
        margin-bottom: 24px;
      }
      h4 {
        text-align: center;
        font-size: 16px;
        color: #414141;
      }
      p {
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 48px;
      }
      span {
        font-size: 14px;
        text-align: center;
        color: #787878;
        font-size: 14px;
        line-height: 42px;
        .iconfont {
          display: inline-block;
          font-size: 13px;
          transform: rotate(270deg);
          position: relative;
          top: -2px;

          color: #2e86ff;
        }
      }
    }
    .Tips {
      position: absolute;
      width: 100%;
      height: 100%;

      .tips_in {
        background: rgba($color: #000000, $alpha: 0.6);
        width: 100%;
        height: 100%;
        h5 {
          padding-top: 100px;
          font-size: 20px;
          color: #fff;
          text-align: center;
        }
      }
    }
  }
  .cutSchoolNumber {
    margin-top: 60px;
  }
}
.search_major {
  background: #fff;
  border-radius: 4px;
  padding: 80px 100px;
  padding-bottom: 220px;
  .header_search {
    display: flex;
    justify-content: space-between;
    width: 710px;

    .search_header_left {
      > h3 {
        padding-bottom: 22px;
      }
      .my_achievement {
        display: flex;
        background: #f8f8f8;
        border-color: #f8f8f8;
        border-radius: 4px;
        color: #818181;
        > span {
          display: block;
          line-height: 36px;
          padding-left: 18px;
          width: 200px;
        }
        > i {
          padding: 14px;
          font-size: 12px;
        }
      }
    }
    .search_header_right {
      > h3 {
        padding-bottom: 22px;
      }
      .el-button-group {
        .span {
          display: block;
          width: 120px;
        }
      }
      .el-button--primary {
        color: #818181;
        background: #f8f8f8;
        border-color: #f8f8f8;
        span {
          width: 78px;
        }
      }
      .el-dropdown .el-dropdown__caret-button::before {
        background: #f8f8f8;
      }
      .el-dropdown .el-dropdown__caret-button:hover {
        background: #f8f8f8;
        height: 100%;
      }
    }
  }
  .search_list_name {
    padding-top: 60px;
  }
  .list_name {
    width: 710px;
    margin-bottom: 10px;
    background: #f8f8f8;
    display: flex;
    border-radius: 10px;
    justify-content: space-between;
    position: relative;
    color: #757575;
    span {
      padding: 24px 24px;
    }
    i {
      color: #414141;
      padding: 20px 24px;
    }

    .el-icon-circle-plus-outline {
      color: #2e86ff;
      font-size: 24px;
    }
    .el-icon-remove-outline {
      color: rgb(218, 22, 22);
      font-size: 24px;
    }
    .addMajor {
      position: absolute;

      width: 100%;
      height: 100%;
      right: 0;
      top: 0;
    }
    .cutMajor {
      position: absolute;

      width: 80px;
      height: 62px;
      right: 0;
      top: 0;
      z-index: 20;
    }
  }

  .search_major_school {
    margin-top: 30px;
    .el-button {
      padding: 12px 70px;
      .el-icon-search {
        padding: 0 5px;
      }
    }
  }
}
</style>